<!-- Modal -->
<div class="modal fade" id="addProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Add Project</h4>
      </div>
      <div class="modal-body">

        <div class="row">
          <div class="col-xs-1 col-sm-3 col-md-3 col-lg-3"><label class="label" for="data_entry_li_content_projectname">Projectname:</label></div>
          <div class="clearfix visible-xs-block"></div>
          <div class="col-xs-11 col-sm-9 col-md-9 col-lg-9">
            <div class="form-group">
              <input name="projectname" class="form-control" id="data_entry_projectname" value="">
            </div>
          </div>
          <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
        </div>

        <div class="row">
          <div class="col-xs-1 col-sm-3 col-md-3 col-lg-3"><label class="label" for="data_entry_li_content_projectname">Attribute groups:</label></div>
          <div class="clearfix visible-xs-block"></div>
          <div class="col-xs-11 col-sm-9 col-md-9 col-lg-9">

            <div class="form-group project-attribute-group">



              <ul class="group-list-parent">
                <li id_table="0" class="getgroupchilds"><a href="#">Attribute groups</a></li>
              </ul>

            </div>
          </div>
           <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
        </div>

        <div class="row">
          <div class="col-xs-1 col-sm-3 col-md-3 col-lg-3"><label class="label" for="data_entry_li_content_projectname">Selected lists:</label></div>
          <div class="clearfix visible-xs-block"></div>
          <div class="col-xs-11 col-sm-9 col-md-9 col-lg-9">

           <ul class="selected_lists">

           </ul>

          </div>
           <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
        </div>

        <div class="row">
          <div class="col-xs-1 col-sm-3 col-md-3 col-lg-3"><label class="label" for="data_entry_li_content_projectname">Availaible Lists:</label></div>
          <div class="clearfix visible-xs-block"></div>
          <div class="col-xs-11 col-sm-9 col-md-9 col-lg-9">

            <div class="form-group project-species-group">



              <ul class="species-list">
                <li id_list="0" class="getlistchilds"><a href="#" class="open_list">Lists</a></li>
              </ul>

            </div>
          </div>
           <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary addProject">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-sm-12">

        <!-- start panels  -->

        <div class="panel-group" id="accordion">

          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="tab-observation"><i class="fa fa-long-arrow-right gc_main_tabs_margin"></i>Observation</a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">

                <div class="row">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_project">Project:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="input-group user-projects">

                    </div>
                  </div>
                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div class="row">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_species">Species:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="form-group">
                      <input type="text" autocomplete="off" name="species" class="form-control" id="data_entry_li_content_species" placeholder="Search for species and select from list">

                      <input type="hidden" name="id_item" id="id_item" value="" />
                      <input type="hidden" name="id_record" id="id_record" value="" />
                    </div>
                  </div>
                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div class="row">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_date">Date:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="form-group">

                      <div class='input-group date' id='data_entry_li_content_date' data-date-format="YYYY-MM-DD">
                          <input type='text' class="form-control data_entry_li_content_date" />
                          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                          </span>
                      </div>

                    </div>
                  </div>
                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div class="row">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_ref">Lat/Long:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="input-group">
                      <input name="ref" class="form-control" id="data_entry_li_content_ref">
                      <span class="input-group-addon" id="data_entry_li_a_map">
                        <a href="#"><span class="glyphicon glyphicon-pencil" title="pic from map"></span></a>
                      </span>
                    </div>
                  </div>

                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div class="row show_record_id">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_ref">Record ID:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="input-group">
                      <input type="text" name="id_record_show" class="form-control" />
                    </div>
                  </div>

                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div class="row">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="row">
                      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary btn-lg" name="reset" id="reset" title="Reset form"><span class="glyphicon glyphicon-refresh"></span></button>
                      </div>
                      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 button-observation">
                        <button type="button" class="btn btn-primary btn-lg data_entry_submit" name="submit" id="submit" title="Save observation"><span class="glyphicon glyphicon-floppy-disk"></span></button>
                      </div>
                      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 button-delete">
                      </div>
                      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <img id="actiongif" src="<?php echo $basePath; ?>/img/loading-red.gif" />
                        <p id="success_message">Successfully saved observation</p>
                      </div>
                    </div>
                  </div>
                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><i class="fa fa-long-arrow-right gc_indent"></i>Additional Observation Fields</a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">

                <div class="row gs-form-group">
                  <div class="col-xs-1 col-sm-2 col-md-2 col-lg-1"><label class="label" for="data_entry_li_content_abundance">Select<br />fields:</label></div>
                  <div class="clearfix visible-xs-block"></div>
                  <div class="col-xs-11 col-sm-10 col-md-7 col-lg-6">
                    <div class="form-group attribute-groups">

                    </div>
                  </div>
                  <div class="hidden-xs hidden-sm col-md-3 col-lg-5"></div>
                </div>

                <div id="attributes"></div>

              </div>
            </div>
          </div>


          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><i class="fa fa-long-arrow-right gc_indent"></i>Observation Related Media</a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">

                <h2 id="observation_photos">Upload photos for this observation</h2>

                <p class="fileupload"><input id="fileupload" type="file" name="files[]" data-url="<?php echo $basePath; ?>/gospecies/json-record-add/image-add" multiple /></p>

                <script>
                var gs_upload_index = 0;
                $('#fileupload').fileupload({
                  url: '<?php echo $basePath; ?>/gospecies/json-record-add/image-add',
                  dataType: 'json',
                  fileTypes: /^image\/(gif|jpeg|png)$/,
                  loadImageMaxFileSize:200000000,
                  // Enable image resizing, except for Android and Opera,
                  // which actually support image resizing, but fail to
                  // send Blob objects via XHR requests:
                  disableImageResize: /Android(?!.*Chrome)|Opera/
                  .test(window.navigator && navigator.userAgent),
                  imageMaxWidth: 1200,
                  imageMaxHeight: 800,
                  imageCrop: true, // Force cropped images
                  done: function (e, data) {

                    var image_folder_name = data.result.image_folder_name;
                    var url = '<?php echo $basePath; ?>/data/tmpuploads/' + image_folder_name;

                    $.each(data.result.files, function (index, file) {

                      var html    = '<div class="image-box row">';
                      html = html + ' <div class="col-md-6">';
                      html = html + '  <label class="label" for="image-title_' + gs_upload_index + '">Title:</label>';
                      html = html + '  <div class="form-group">';
                      html = html + '   <input name="i_title[]" value="" type="text" class="form-control" id="image-title_' + gs_upload_index + '"/>';
                      html = html + '   <input name="i_id_media[]" type="hidden" value="" /><input name="i_name[]" type="hidden" value="'+file.name+'" />';
                      html = html + '  </div>';
                      html = html + '  <label class="label" for="image-description_' + gs_upload_index + '">Description:</label>';
                      html = html + '  <div class="form-group">';
                      html = html + '   <textarea rows="3" name="i_description[]" id="image-description_' + gs_upload_index + '" class="form-control" placeholder="Enter image description"></textarea>';
                      html = html + '  </div>';
                      html = html + ' </div>';
                      html = html + ' <div class="col-md-6">';
                      html = html + '  <a href="' + url + '/' + file.name + '" target="_blank"><img src="' + url + '/thumbnail/' + file.name + '" /></a>';
                      html = html + '  <br /><a href="#" class="imagedelete" file-name="'+file.name+'">delete image</a>';
                      html = html + ' </div>';
                      html = html + '</div>';

                      gs_upload_index = gs_upload_index + 1;

                      $(html).appendTo("#images");
                    });
                  }
                });
                </script>

                <div id='images'></div>


              </div>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-edit gc_main_tabs_margin"></span>Edit Your Observations</a>
              </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse">
              <div class="panel-body" id="observation_table">

                <table id="observations"></table>

              </div>
            </div>
          </div>

        </div>
        <!-- end panels  -->

    </div>
  </div>
</div>

<div class="getrecords"></div>
<div class="getuserprojects"></div>
<div class="getprojectattributegroups"></div>
<div class="getrecordattributes"></div>